<template>
  <div style="height:100%;">
    <div style="transition:1s;background:#000;height:100%;">
      <div class="my-header">
        <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
        <strong>填写物流信息</strong>
        <i class="myMsg"></i>
      </div>
      <div class="address-from" style="transition:1s;height:100%;transform: scale(1);" :class="freightVisible? 'popupVisible' : ''">
        <div class="cell-from-item" @click="()=>freightVisible=true" style="justify-content:space-between;">
          <span class="title">物流公司 </span>
          <div class="content">
            <input class="input-select" type="text" readonly :value="freightForm.express" placeholder="">
          </div>
          <i class="iconfont icon-right"></i>
        </div>
        <div class="cell-from-item">
          <span class="title">物流单号 </span>
          <div class="content">
            <input type="text" v-model="freightForm.expressCode" placeholder="运单号">
          </div>
        </div>
        <div class="save-address" @click="handleSubmit">确认</div>
        <!--<div class="save-address" @click="useAddress">保存并使用</div>-->
      </div>
    </div>
    <div>
      <mt-popup v-model="freightVisible" position="bottom" class="refund-pricker">
        <mt-picker ref="freightPicker" :slots="freightSlots" valueKey="name" :showToolbar="true">
          <slot>
            <div class="picker-header">
              <span @click="()=>freightVisible=false">取消</span>
              <span class="picker-confirm" @click="freightConfirm()">确认</span>
            </div>
          </slot>
        </mt-picker>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from 'mint-ui'
  import {
    mapGetters
  } from 'vuex'
  import {
    getLogisticsCompany,
    addReturnVoucher
  } from '@/api/shop'
  import VDistpicker from '@/plugins/v-distpicker/src'
  export default {
    data() {
      return {
        freightVisible: false,
        freightSlots: [{
          flex: 1,
          values: [],
          textAlign: 'center'
        }],
        freightData: [],
        freightForm: {
          express: '请选择',
          expressCode: ''
        },
        title: '新建地址',
        addressVisible: false,
        errMessage: '',
        backUrl: ''
      }
    },
    watch: {},
    components: {
      VDistpicker
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      freightConfirm() {
        this.freightForm.express = this.$refs.freightPicker.getValues()[0].name
        this.freightVisible = false
      },
      handleSubmit() {
        if (!this.valid()) {
          return Toast({
            message: this.errMessage
          })
        }
        const params = {
          returnId: this.$route.query.id,
          userId: this.userInfo.id,
          express: encodeURI(this.freightForm.express),
          expressCode: this.freightForm.expressCode
        }
        addReturnVoucher(params).then(res => {
          Toast({
            message: '物流信息填写成功'
          })
          this.$router.go(-1)
        }).catch(err => {
          console.log(err)
        })
      },
      valid() {
        if (this.freightForm.express === '请选择') {
          this.errMessage = '请选择物流公司'
          return false
        }
        if (this.freightForm.expressCode === '') {
          this.errMessage = '请填写运单号'
          return false
        }
        if (this.freightForm.expressCode.length > 50) {
          this.errMessage = '订单号长度不得超过50'
          return false
        }
        return true
      },
      fetchData() {
        getLogisticsCompany({}).then(res => {
          this.freightData = res.data.companyList
          // 设置
          this.$set(this.freightSlots[0], 'values', this.freightData)
        }).catch(() => {})
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<!-- address -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';

  .refund-pricker {
    width: 100%;
    .picker-header {
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      background: #EBEBF5;
      span {
        padding: $padding;
        font-size: 14px;
        display: block;
      }
      .picker-confirm {
        color: $red;
      }
    }
    .address-container {
      padding-bottom: 100px;
    }
  }

  .address-from {
    padding-top: 1.25rem;
    background: #fff;
    .cell-from-item {
      @include flexbox(flex-start,
      center,
      row,
      nowrap);
      padding: $padding;
      border-bottom: 1px solid #eee;
      .title {
        font-size: $subtitle;
        color: #333;
        white-space: nowrap;
      }
      .content {
        width: 100%;
        @include placeholderColor($gray);
        input {
          width: 100%;
          border: none;
          outline: none;
          box-shadow: none;
          text-shadow: none;
          text-align: right;
          font-size: $subtitle;
          color: #333;
          line-height: 24px;
        }
        .input-select {
          pointer-events: none;
          &:disabled {
            background-color: #ffffff;
            color: #333;
          }
        }
      }
      .icon-right {
        font-size: 16px;
        color: $gray;
      }
      &.switch {
        justify-content: space-between;
      }
    }

    .save-address {
      bottom: .2rem;
      width: 90%;
      text-align: center;
      padding: $padding 0;
      background: $red;
      font-size: $title;
      color: #fff;
      margin: .5rem auto;
      border-radius: 2px;
    }
    .del-address {
      bottom: .2rem;
      width: 90%;
      text-align: center;
      padding: $padding 0;
      background: #f3f3f3;
      font-size: $title;
      color: #000;
      margin: .5rem auto;
      border-radius: 2px;
    }
  }

  .popupVisible {
    transform: scale(0.95) !important;
  }

</style>
